<template>
  <div class="join-page">
    <div class="join-header">
      <img src="@/assets/images/join_bg.png" class="jo-img">
    </div>
    <div class="join-cont">
      <div class="join-addr">
        <div class="addr-name">
          <img src="@/assets/images/join_addr.png" class="addr-img">
          <span>{{city}}</span>
        </div>
        <a href="javascript:;" class="join-edit" @click="goUserInfo">修改</a>
      </div>
      <div class="qr-wrap clearfix">
        <div class="qr-item">
          <img src="@/assets/images/qr_hz.png" v-if="city == '杭州市'">
          <img src="@/assets/images/qr_huz.png" v-else-if="city == '湖州市'">
          <img src="@/assets/images/qr_jh.png" v-else-if="city == '金华市'">
          <img src="@/assets/images/qr_jx.png" v-else-if="city == '嘉兴市'">
          <img src="@/assets/images/qr_ls.png" v-else-if="city == '丽水市'">
          <img src="@/assets/images/qr_nb.png" v-else-if="city == '宁波市'">
          <img src="@/assets/images/qr_qz.png" v-else-if="city == '衢州市'">
          <img src="@/assets/images/qr_sx.png" v-else-if="city == '绍兴市'">
          <img src="@/assets/images/qr_tz.png" v-else-if="city == '台州市'">
          <img src="@/assets/images/qr_wz.png" v-else-if="city == '温州市'">
          <img src="@/assets/images/qr_zs.png" v-else-if="city == '舟山市'">
          <div class="tip">扫一扫，加入群</div>
        </div>
        <div class="qr-item">
          <img src="@/assets/images/qr_z.png">
          <div class="tip">扫一扫，加入群</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Utils from '@/common/utils.js'
export default {
  data () {
    return {
      city: null
    }
  },
  created () {
    let _userData = Utils.local('userData')
    this.city = _userData.city
  },
  methods: {
    goUserInfo () {
      this.$router.push({name: 'mineUserInfo'})
    }
  }
}
</script>


<style lang="scss" scoped>
.join-page{
  background-color: #FFBA6F;
  height: 100%;
  .join-header{
    margin: 0 auto .266667rem /* 10/37.5 */;
    .jo-img{
      width: 100%;
    }
  }
  .join-cont{
    width: 8.266667rem /* 310/37.5 */;
    position: absolute;
    top: 6.48rem /* 243/37.5 */;
    left: calc((100% - 8.266667rem) / 2);
    .join-addr{
      position: relative;
      margin-bottom: .533333rem /* 20/37.5 */;
      .addr-name{
        .addr-img{
          width: .4rem /* 15/37.5 */;
          vertical-align: top;
        }
        font-size: 15px;
        color: #fff;
      }
      .join-edit{
        font-size: 14px;
        position: absolute;
        right: 0;
        top: 0;
        color: #999;
        text-decoration: underline;
      }
    }
    .qr-wrap{
      .qr-item{
        width: 3.466667rem /* 130/37.5 */;
        height: 4.266667rem /* 160/37.5 */;
        background-color: #fff;
        position: relative;
        float: left;
        margin-right: 1.333333rem /* 50/37.5 */;
        &:nth-child(2n){
          margin-right: 0;
        }
        img{
          width: 3.013333rem /* 113/37.5 */;
          height: 3.866667rem /* 145/37.5 */;
          display: block;
          margin: 0 auto;
        }
        .tip{
          font-size: 13px;
          color: #ff8600;
          text-align: center;
          position: absolute;
          left: 0;
          width: 100%;
          bottom: .133333rem /* 5/37.5 */;
        }
      }
    }
  }
}
</style>
